﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用户管理</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/honeySwitch/honeySwitch.css" type="text/css" rel="stylesheet"/>
    <script src="../../scripts/honeySwitch/honeySwitch.js"></script>

</head>
<body>
<div class="mini-toolbar" style="padding:2px;border-bottom:0;">
    <table style="width:100%;">
        <tr>
            <td style="width:100%;"></td>
            <td style="white-space:nowrap;">
                <label for="status-combo">状态: </label>
                <input id="status-combo" class="mini-combobox" data="Status" valueField="id" textField="text"
                       showNullItem="true"/>
            </td>
            <td style="white-space:nowrap;">
                <label for="online-combo">是否在线: </label>
                <input id="online-combo" class="mini-combobox" data="Online" valueField="id" textField="text"
                       showNullItem="true"/>
            </td>
            <td style="white-space:nowrap;">
                <label for="keywords">关键词: </label>
                <input id="keywords" class="mini-textbox" emptyText="ID,姓名,账号"
                       style="width:230px;" onenter="onKeyEnter"/>
                <a class="mini-button" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</div>
<div class="mini-fit">
    <div id="datagrid1" class="mini-datagrid" style="width:100%;height:100%;"
         ajaxType="get" idField="id" onload="onLoadError"
         sizeList="[5,10,20,50,100]" pageSize="20"
         dataField="data.records" totalField="data.total">
        <div property="columns">
            <div field="id" width="20" headerAlign="center" align="center">ID</div>
            <div field="avatar" width="60" headerAlign="center" renderer="onAvatarRenderer" align="center">头像</div>
            <div field="nickname" width="80" headerAlign="center" align="center">昵称</div>
            <div field="phone" width="60" headerAlign="center" align="center">帐号</div>
            <div field="status" width="60" headerAlign="center" renderer="onStatusRenderer" align="center">状态</div>
            <div field="onlineDesc" width="60" headerAlign="center" align="center">是否在线</div>
            <div field="sexDesc" width="40" headerAlign="center" align="center">性别</div>
            <div field="lastIp" width="80" headerAlign="center" align="center">最近登录IP</div>
            <div field="lastLoginTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">
                最近登录时间
            </div>
            <div field="createTime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" align="center">
                创建日期
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 状态下拉框数据
    let Status = [{id: true, text: '正常'}, {id: false, text: '禁用'}];
    let Online = [{id: true, text: '在线'}, {id: false, text: '离线'}];
    let Sex = [{id: 0, text: '保密'}, {id: 1, text: '男'}, {id: 2, text: '女'}];


    mini.parse();

    let header = {Authorization: $.cookie(TOKEN_KEY)};

    // 表格
    let grid = mini.get("datagrid1");
    grid.setUrl(`${MSG_API_PREFIX}/user/list`);
    grid.setAjaxOptions({
        headers: header
    });
    grid.load();
    //表格渲染完毕后渲染开关控件
    grid.on("update", function (e) {
        // 开关控件初始化
        switchInitForChatGrid("user", grid);
    });

    // 搜索
    function search() {
        let keywords = mini.get("keywords").getValue();
        let status = mini.get("status-combo").getValue();
        let online = mini.get("online-combo").getValue();
        grid.load({keywords: keywords, status: status,isOnline: online});
    }

    // 回车搜索
    function onKeyEnter(e) {
        search();
    }

    $(function () {
        switchInitForForm();
    });
</script>
</body>
</html>
